<template>
  <div :class='prefixCls'>
    <quill-editor
      v-model='content'
      ref='QuillEditor'
      :options='editorOption'
      @change='onEditorChange($event)'
    >
    </quill-editor>

    <a-drawer
      title='选择媒体'
      placement='right'
      :width='960'
      :closable='true'
      :visible='visibleMediaDrawer'
      :keyboard='false'
      :maskClosable='false'
      @close='closeMediaDrawer'
    >
      <media :using-in-component='true' @onSelected='mediaSelected'></media>
    </a-drawer>
  </div>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { Quill, quillEditor } from 'vue-quill-editor'
import media from '@/views/media/media'

// 工具栏配置
const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
  ['blockquote', 'code-block'],

  [{ 'header': 1 }, { 'header': 2 }],               // custom button values
  [{ 'list': 'ordered' }, { 'list': 'bullet' }],
  [{ 'script': 'sub' }, { 'script': 'super' }],      // superscript/subscript
  [{ 'indent': '-1' }, { 'indent': '+1' }],          // outdent/indent
  [{ 'direction': 'rtl' }],                         // text direction

  [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
  [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

  [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
  [{ 'font': [] }],
  [{ 'align': [] }],
  ['link', 'image'],
  ['clean']                                         // remove formatting button
]

export default {
  name: 'QuillEditor',
  components: {
    quillEditor,
    media
  },
  props: {
    prefixCls: {
      type: String,
      default: 'ant-editor-quill'
    },
    // 表单校验用字段
    // eslint-disable-next-line
    value: {
      type: String
    }
  },
  mounted() {
    this.$watch('value', val => {
      this.$set(this.$data, 'content', val)
      console.log('text--->', val)
    }, { deep: true, immediate: true })
  },
  data() {
    return {
      content: null,
      editorInstance: null,
      visibleMediaDrawer: false,
      editorOption: {
        modules: {
          toolbar: {
            container: toolbarOptions,  // 工具栏
            handlers: {
              'image': value => {
                if (value) {
                  this.openMediaDrawer('image')
                } else {
                  this.quill.format('image', false)
                }
              }
            }
          }
        }
      }
    }
  },
  methods: {
    onEditorChange({ quill, html, text }) {
      console.log('editorChange-->',html)
      this.$emit('change', html)
      this.$emit('input', html)
    },
    insertImage(res) {
      // 获取富文本组件实例
      let quill = this.$refs.QuillEditor.quill
      // 如果上传成功
      if (res) {
        // 获取光标所在位置
        let length = quill.getSelection().index
        // 插入图片，res为服务器返回的图片链接地址
        quill.insertEmbed(length, 'image', res.path)
        // 调整光标到最后
        quill.setSelection(length + 1)
      } else {
        // // 提示信息，需引入Message
        this.$message.error('图片插入失败')
      }
    },

    openMediaDrawer(field) {
      this.currentMediaField = field
      this.visibleMediaDrawer = true
    },
    closeMediaDrawer() {
      this.visibleMediaDrawer = false
    },
    mediaSelected(item) {
      let editor = this.editorInstance

      switch (this.currentMediaField) {
        case 'image':
          this.insertImage(item)
          break
      }
      this.closeMediaDrawer()
    }
  }
}
</script>

<style lang='less' scoped>
@import url('../index.less');

/* 覆盖 quill 默认边框圆角为 ant 默认圆角，用于统一 ant 组件风格 */
.ant-editor-quill {
  line-height: initial;

  /deep/ .ql-toolbar.ql-snow {
    border-radius: @border-radius-base @border-radius-base 0 0;
  }

  /deep/ .ql-container.ql-snow {
    max-height: 500px;
    border-radius: 0 0 @border-radius-base @border-radius-base;

    .ql-editor{
      max-height: 500px;
      min-height: 300px;
    }
  }
}
</style>
